Description

The editor-side tour bridge: a single React component that listens for tour-step interactions in the editor and advances the tour when the prompted user action happens. Sufficient to power the first tour (#2306, Navigating the Editor) — later PRs extend it with additional interaction types.

The framework foundation (route, provider, popover, hub UI, types) lives in #2348. This PR replaces the empty EditorTourBridge.tsx stub from #2348 with its actual implementation.

Architecture

EditorTourBridge (src/routes/v2/pages/Editor/components/EditorTourBridge.tsx)

Reads the current step from useTour(). If the step declares an interaction, the bridge wires up a listener that auto-advances the tour when the user performs that action. Three interactions:

• select-task — advances when the user clicks an element whose ancestor matches [data-tour-node="task"] (the stable selector added by feat: Guided Tour - Navigating the Editor #2306; not React Flow's CSS class, so library renames don't break it).
• undock-window — advances when a docked panel matching targetWindowId is dragged out of its dock area.
• redock-window — advances when a floating window matching targetWindowId is dropped back into a dock.

Helpers

• followWindowPosition — runs alongside any step with a targetWindowId, keeping the highlight following a floating panel as the user drags it. Throttled to one resize-event-dispatch per animation frame.
• trackDockStateTransition — observes dockState changes across all windows (or one specific target) to detect undock/redock. Records a baseline at step start and fires when a baselined window crosses the transition.
• Direction tracking — when the user navigates back via the prev arrow, the bridge knows to skip in the reverse direction if the step's prompted state can't be re-entered.

Skip-with-fallback

Each interaction checks whether its prompted state is already satisfied when the step lands (e.g. the user has already undocked the target window). If so, the step's fallbackContent (declared in the tour JSON) replaces its content and the interaction is disabled — the step becomes a non-interactive informational beat the user can advance past with Next.

Related Issue and Pull requests

Progresses https://github.com/Shopify/oasis-frontend/issues/583

Builds on #2348 (foundation). First consumer is #2306 (Navigating the Editor). Later PRs in the stack (#2347) add more interaction types on top.

Type of Change

• New feature

Checklist

• I have tested this does not break current pipelines / runs functionality
• I have tested the changes on staging

Test Instructions

No visible behavior on its own — the registry from #2348 is still empty. Test in context with #2306 on top:

• Walk through the Navigating the Editor tour. The interactive steps (click Greet task, undock Task Properties, redock Task Properties) should auto-advance when the prompted action completes.
• Fallback paths: enter step 9 (undock) with Task Properties already floating — the step should show fallback copy and advance on click instead of requiring a drag. Same for step 10 (redock) if the window is already docked.
• Step 7 should advance on a click anywhere on the Greet task node body, but not on its IO ports (regression check for [data-tour-node="task"] over .react-flow__node).
• Use the prev arrow to walk back through an interactive step. The direction tracker should let the back-navigation pass through cleanly even if the prompted state can't be replayed in reverse.

Additional Comments

The three interactions here are the minimum set #2306 needs. #2347 adds add-task, add-input, add-output, connect-edge, expand-folder, library-search, and set-argument for the Build Your First Pipeline tour (#2312).